<template>
  <Card>
    <Row :gutter="8" type="flex" class="ivu-mb-8">
      <Col :span="20"
        ><DatePicker
          v-model="params.time"
          type="daterange"
          :clearable="false"
          :options="options"
          split-panels
          placeholder="请选择时间"
          v-width="200"
          @on-change="askData"
        ></DatePicker>
        <Select
          v-model="params.dimension"
          multiple
          placeholder="选择维度"
          clearable
          v-width="200"
          @on-change="askData"
          class="ivu-ml-8"
        >
          <Option v-for="item in dimensionList" :value="item" :key="item">{{
            item
          }}</Option>
        </Select>

        <Button
          type="primary"
          @click="exportData"
          class="ivu-ml-8"
          v-hasC="{
            name: 'v1-report-net-market-download',
            flag: 'v1/report/net-market/download',
          }"
          >导出</Button
        ></Col
      >
      <Col :span="4" class="ivu-text-right">
        <Button type="primary" @click="handdleSM" class="ivu-ml-8"
          >报表说明</Button
        >
      </Col>
    </Row>
    <Table
      id="table"
      row-key="id"
      size="small"
      show-summary
      :border="true"
      :indent-size="0"
      :columns="columns"
      :data="data"
      :loading="loading"
      :span-method="handleSpan"
      :max-height="670"
      :summary-method="handleSummary"
    >
    </Table>

    <Modal
      v-model="showSM"
      title="分析报表说明"
      width="1000"
      footer-hide
      :draggable="true"
    >
      <div class="inner">
        <span>类别 来源：</span>机构设置/营销表配置-类别。 <br />
        <span>维度 来源：</span>机构设置/营销表配置-类别 <br />
        <span>渠道 来源：</span
        >机构设置/来源渠道。展示形式：一级渠道/二级渠道<br />
        <span>本月计划/预算 来源：</span>分析报表/月计划任务/计划列表-预算
        <br />
        <span>本月计划/有效留电 来源：</span
        >分析报表/月计划任务/计划列表-有效对话 <br />
        <span>本月计划/白癜风留电 来源：</span
        >分析报表/月计划任务/计划列表-五星留电<br />
        <span>本月计划/白癜风到诊 来源：</span
        >分析报表/月计划任务/计划列表-白癜风到诊<br />
        <span>本月计划/总到诊 来源：</span>分析报表/月计划任务/计划列表-总到诊
        <br />
        <span>实际完成/消费 来源：</span
        >报表/网络营销报表/费用支出录入-营销费用<br />
        <span>实际完成/带白总资源/有效留电 数据来源：</span
        >一级病种=白癜风且患者状态!=未开口，无效、老患者到诊、未添加的患者数量。<br />
        <span>实际完成/带白总资源/白癜风留电 数据来源：</span
        >在有效留电的基础再次判断二级病种为5星的患者数量。<br />
        <span>实际完成/白癜风总到诊/当月 数据来源：</span
        >诊断类型一级病种为白癜风、疑似白癜风创建日期跟筛选的日期为同一个月份的患者数量。<br />
        <span>实际完成/白癜风总到诊/当年度 数据来源：</span
        >诊断类型一级病种为白癜风、疑似白癜风创建日期与筛选的日期为同一年份且日期小于最小筛选日期的患者数量。<br />
        <span>实际完成/白癜风总到诊/往年度 数据来源：</span
        >诊断类型一级病种为白癜风、疑似白癜风创建日期小于筛选的日期年份的患者数量。<br />
        <span>实际完成/白癜风总到诊/合计 数据来源：</span
        >诊断类型一级病种为白癜风、疑似白癜风的患者数量。<br />
        <span>实际完成/带白总到诊/当月 数据来源：</span
        >诊断类型一级病种为白癜风、疑似白癜风、白斑创建日期跟筛选的日期为同一个月份的患者数量。<br />
        <span>实际完成/带白总到诊/当年度 数据来源：</span
        >诊断类型一级病种为白癜风、疑似白癜风、白斑创建日期与筛选的日期为同一年份且日期小于最小筛选日期的患者数量。<br />
        <span>实际完成/带白总到诊/往年度 数据来源：</span
        >诊断类型一级病种为白癜风、疑似白癜风、白斑创建日期小于筛选的日期年份的患者数量。<br />
        <span>实际完成/带白总到诊/合计 数据来源：</span
        >诊断类型一级病种为白癜风，疑似白癜风、白斑的患者数量。<br />
        <span>实际完成/成本/带白留电成本/总留电成本 计算公式：</span
        >消费/有效留电<br />
        <span>实际完成/成本/带白留电成本/白癜风留电成本 计算公式：</span
        >消费/白癜风留电<br />
        <span>实际完成/成本/白癜风到诊成本/当月 计算公式：</span
        >消费/白癜风总到诊当月<br />
        <span>实际完成/成本/白癜风到诊成本/合计 计算公式：</span
        >消费/白癜风到诊合计<br />
        <span>实际完成/成本/带白到诊成本/当月 计算公式：</span
        >消费/带白总到诊当月<br />
        <span>实际完成/成本/带白到诊成本/合计 计算公式：</span
        >消费/带白总到诊<br />
      </div>
    </Modal>
  </Card>
</template>

<script>
import { netmarketList } from "@/api/hqapi/networkMarketing.js";

import util from "@/libs/util";
import Setting from "@/setting";
import { Card } from "view-design";
export default {
  name: "marketingReport",
  data() {
    return {
      showSM: false,
      params: { time: [], dimension: [] },
      columns: [
        { title: "类别", key: "category", minWidth: 180, align: "center" },
        { title: "维度", key: "dimension", minWidth: 180, align: "center" },
        {
          title: "本月计划",
          width: 540,
          align: "center",
          children: [
            { title: "预算", key: "plan_consume", width: 120, align: "center" },
            {
              title: "有效留电",
              key: "dialogue_num",
              width: 100,
              align: "center",
            },
            {
              title: "白癜风留电",
              key: "ld_num",
              width: 120,
              align: "center",
            },
            {
              title: "白癜风到诊",
              key: "bdf_arrived_num",
              width: 120,
              align: "center",
            },
            {
              title: "总到诊",
              key: "arrived_num",
              width: 100,
              align: "center",
            },
          ],
        },
        {
          title: "实际完成",
          width: 1700,
          align: "center",
          children: [
            { title: "消费", key: "xf_money", width: 120, align: "center" },
            {
              title: "带白总资源",
              width: 200,
              align: "center",
              children: [
                {
                  title: "有效留电",
                  key: "all_bdf_cnt",
                  width: 100,
                  align: "center",
                },
                {
                  title: "白癜风留电",
                  key: "yx_bdf_cnt",
                  width: 120,
                  align: "center",
                },
              ],
            },
            {
              title: "白癜风总到诊",
              width: 400,
              align: "center",
              children: [
                {
                  title: "当月",
                  key: "bdf_arrive_now_month",
                  width: 100,
                  align: "center",
                },
                {
                  title: "当年度",
                  key: "bdf_arrive_now_year",
                  width: 100,
                  align: "center",
                },
                {
                  title: "往年度",
                  key: "bdf_arrive_last_year",
                  width: 120,
                  align: "center",
                },
                {
                  title: "合计",
                  key: "bdf_arrive_total",
                  width: 120,
                  align: "center",
                },
              ],
            },
            {
              title: "带白总到诊",
              width: 400,
              align: "center",
              children: [
                {
                  title: "当月",
                  key: "db_arrive_now_month",
                  width: 100,
                  align: "center",
                },
                {
                  title: "当年度",
                  key: "db_arrive_now_year",
                  width: 100,
                  align: "center",
                },
                {
                  title: "往年度",
                  key: "db_arrive_last_year",
                  width: 120,
                  align: "center",
                },
                {
                  title: "合计",
                  key: "db_arrive_total",
                  width: 120,
                  align: "center",
                },
              ],
            },
            {
              title: "成本",
              width: 400,
              align: "center",
              children: [
                {
                  title: "带白留电成本",
                  width: 100,
                  align: "center",
                  children: [
                    {
                      title: "总留电成本",
                      key: "cost_ld",
                      width: 120,
                      align: "center",
                    },
                    {
                      title: "白癜风留电成本",
                      key: "cost_bdf",
                      width: 140,
                      align: "center",
                    },
                  ],
                },
                {
                  title: "白癜风到诊成本",
                  width: 100,
                  align: "center",
                  children: [
                    {
                      title: "当月",
                      key: "cost_bdf_arrive_now_month",
                      width: 100,
                      align: "center",
                    },
                    {
                      title: "合计",
                      key: "cost_bdf_arrive_total",
                      width: 100,
                      align: "center",
                    },
                  ],
                },
                {
                  title: "带白总到诊成本",
                  width: 120,
                  align: "center",
                  children: [
                    {
                      title: "当月",
                      key: "cost_db_arrive_now_month",
                      width: 100,
                      align: "center",
                    },
                    {
                      title: "合计",
                      key: "cost_db_arrive_total",
                      width: 100,
                      align: "center",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      data: [],
      loading: false,
      dimensionList: [],
      options: {
        disabledDate(date) {
          return (
            (date && date.valueOf() > Date.now()) ||
            date.valueOf() < Date.now() - 3600 * 1000 * 24 * 366
          );
        },
      },
      downloadUrl: Setting.apiBaseURL + "/v1/report/net-market/download",
      totalArr: {},
    };
  },
  mounted() {
    let stime = this.$Date()
      .startOf("month")
      .format("YYYY-MM-DD");
    let etime = this.$Date().format("YYYY-MM-DD");
    if (stime == etime) {
      this.params.time = [stime, etime];
    } else {
      this.params.time = [
        stime,
        this.$Date(new Date() - 3600 * 1000 * 24).format("YYYY-MM-DD"),
      ];
    }
    this.askData();
  },
  methods: {
    changeData(data, res) {
      if (data && data.length > 0) {
        data.forEach((item) => {
          res = [...res, ...item];
        });
      }
      return res;
    },
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan1,
          colspan: row.colspan1,
        };
      }
      // if (columnIndex === 1) {
      //   return {
      //     rowspan: row.rowspan2,
      //     colspan: row.colspan2,
      //   };
      // }
    },
    askData() {
      if (
        this.$Date(this.params.time[1]).diff(
          this.$Date(this.params.time[0]),
          "years"
        ) > 0
      ) {
        this.$Message.error("时间段选择请勿超过一年");
      } else {
        this.loading = true;
        let params = {
          start_time: this.$Date(this.params.time[0]).format("YYYY-MM-DD"),
          end_time: this.$Date(this.params.time[1]).format("YYYY-MM-DD"),
          dimension: this.params.dimension,
        };
        netmarketList(params).then((res) => {
          this.dimensionList = res.condition.dimension;
          this.data = this.changeData(res.list, []);
          this.totalArr = res.total;
          this.loading = false;
        });
      }
    },
    handleSummary({ columns, data }) {
      const sums = {};
      columns.forEach((column, index) => {
        const key = column.key;
        sums[key] = {
          key,
          value: this.totalArr[key],
        };
      });
      return sums;
    },
    exportData() {
      let params = {
        start_time: this.$Date(this.params.time[0]).format("YYYY-MM-DD"),
        end_time: this.$Date(this.params.time[1]).format("YYYY-MM-DD"),
        dimension: this.params.dimension,
      };
      let parm = "";
      for (let i in params) {
        parm += `&${i}=${params[i]}`;
      }
      window.open(
        `${this.downloadUrl}?auth_access_token=${util.cookies.get(
          "token"
        )}&auth_project_id=${localStorage.getItem("currentProject")}${parm}`
      );
    },
    handdleSM() {
      this.showSM = true;
    },
  },
  components: { Card },
};
</script>
<style lang="less" scoped>
.inner {
  max-height: 600px;
  overflow-y: auto;
  padding: 0px;
  line-height: 32px;
  font-size: 16px;
  color: #2d8cf0;
}
.inner span {
  font-weight: bold;
  color: #808695;
}
</style>
